<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1 {
            width: 200px;
            height: 200px;
            background: yellowgreen;
        }

        .c2 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 250px;
            height: 250px;
            border: 1px dashed rgb(128, 128, 128);
            margin: 50px;
        }

        img {
            width: 200px;
            height: 200px;
        }

        video {
            width: 200px;
            height: 200px;
        }

        body {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="c1" id="c1" draggable="true"></div>
    <div class="c2" id="c2"></div>
</body>
<script>
    
   /**
    * 
    * 以下事件在被拖动目标上触发
    * ondragstart 拖动开始
    * ondrag 拖被拖动目标拖动中
    * ondragend 拖动完成后触发
    * 
    * 以下事件在被放置目标上触发
    * ondragenter 被拖拽元素进入放置区域时触发
    * ondragover 被拖动元素在放置区域拖动时触发
    * ondragleave 被拖动元素离开放置区域时出发时
    * ondrop 被拖动元素在放置区域放下出发时，释放鼠标时触发此事件
   */
    let c1 = document.querySelector('#c1')
    let c2 = document.querySelector('#c2')
    console.log(c1)
    console.log(c2)

    c1.addEventListener('dragstart', handleDragStart)

    function handleDragStart(e) {
        console.log('拖拽开始', e);
        e.dataTransfer.setData("text/plain", e.target.id)
    }
    c2.addEventListener('dragover', handleDragOver)

    function handleDragOver(e) {
        console.log('进来了');
        e.preventDefault()
    }
    c2.addEventListener('drop', handelDrop)

    function handelDrop(e) {
        console.log('放置');
        e.preventDefault()
        console.log(e.dataTransfer.items);
        // let createOne = e.dataTransfer.getData('text/plain')
        // c2.appendChild(document.getElementById(createOne))
        [...e.dataTransfer.items].forEach(ele => {
            console.log(ele.kind);
            if (ele.kind == 'file') {
                const file = ele.getAsFile()
                console.log(file);
                createPreview(file)
            }
        })
    }

    function createPreview(file) {
        if (!file.type.startsWith("image/") && !file.type.startsWith("video/")) {
            return
        }
        if (file.type.includes('image')) {
            const image = document.createElement('img')
            image.src = URL.createObjectURL(file)
            console.log(image.src);
            image.onLoad = function () {
                URL.revokeObjectURL(this.src)
            }
            c2.appendChild(image)
        }
        if (file.type.includes('video')) {
            const video = document.createElement('video')
            video.src = URL.createObjectURL(file)
            video.controls = true
            video.autoplay = true
            console.log(video.src);
            video.onLoad = function () {
                URL.revokeObjectURL(this.src)
            }
            c2.appendChild(video)
        }
    }
</script>

</html>